<template>
    <view class="content">
        <view class="box">
            <view>问题</view>
            <textarea v-model="question" placeholder="请输入问题" placeholder-class="p-inp"></textarea>
        </view>
        <view class="box">
            <view>考题选项</view>
            <block v-for="(item, index) in list" :key="index">
                <textarea v-model="item.options" placeholder="请输入" placeholder-class="p-inp" class="t-inp" :auto-height="true"></textarea>
                <view class="down">
                    <view class="u-flex">
                        <image src="../../../static/image/add.png" class="add-icon" v-if="index == list.length - 1" @click="add"></image>
                        <view class="u-p-l-20" v-if="list.length != 1" @click="del(index)">删除</view>
                    </view>
                    <view class="u-flex">
                        <view class="u-font-24 u-p-r-15">是否为正确选项</view>
                        <view class="switch1" :class="item.status == 1?'switchAct1':'switchAct2'" @click="onOff(item)">
                        	<view class="switch-small"></view>
                        	<view class="switch-text">{{item.status == 1?'是':'否'}}</view>
                        </view>
                    </view>
                </view>
            </block>
        </view>
        <view class="box u-flex u-row-between u-col-center">
            <view>分值</view>
            <input type="digit" v-model="score" placeholder="请输入" placeholder-class="p-inp" class="inp">
        </view>
        
        <view class="btn" @click="$noMultipleClicks(doSave)">立即添加</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                noClick:true,//连点
                question: '',
                list: [{id: '',options: '',status: 2}],
                score: '',
                id: '',
            };
        },
        onLoad(option) {
            if (option.id) {
                this.id = option.id
                this.getData()
                uni.setNavigationBarTitle({
                	title:'编辑考题'
                })
            }
        },
        methods: {
            // 获取考题详情
            getData() {
                this.$ajax('question_detail', {
                    user_token: this.$getSync('userToken'),
                    id: this.id,//考题id
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.question = ret.detail.question
                        this.score = ret.detail.score
                        this.list = ret.detail.answer
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            // 立即添加
            doSave() {
                if (!this.question) {
                    this.$toast('请输入问题');
                    return
                }
                //判断如果点击添加后 没有输入信息 提示
                let isNull = false, isStatue = false;
                if (this.list.length <= 0) {
                    this.$toast('请填写考题选项');
                    return false;
                }
                this.list.forEach(el => {
                    if (!el.options) {
                        isNull = true;
                    }
                    if (el.status == 1) {
                        isStatue = true
                    }
                });
                if (isNull) {
                    this.$toast('请将考题选项填写完整');
                    return false;
                }
                if (!isStatue) {
                    this.$toast('请设置正确答案选项');
                    return false;
                }
                if (!this.list[0].options) {
                    this.$toast('请输入考题选项');
                    return false;
                }
                if (!this.score) {
                    this.$toast('请输入分值');
                    return
                }
                
                this.$ajax('insert_question_bank', {
                    user_token: this.$getSync('userToken'),
                    score: this.score,//分值
                    question: this.question,//问题
                    id: this.id,//考题id 编辑传	
                    data: this.list,//选项数组 "data":[{"id":"9","options":"5月5号","status":"1"},{"id":"10","options":"6月6号","status":"2"}]} 1正确答案 2错误答案
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.$toast('添加成功');
                        setTimeout(() => {
                        	this.$backT()
                        }, 500)
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            // 切换是否为正确选项
            onOff(item) {
                item.status = item.status == 1 ? 2 : 1
            },
            // 添加选项
            add() {
                this.list.push({id: '',options: '',status: 2})
            },
            // 删除
            del(index) {
                this.list.splice(index, 1);
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
    .content{
        padding: 20rpx;
    }
    .box{
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        padding: 25rpx;
    }
    
    textarea{
        width: 100%;
        padding: 20rpx;
        background-color: #fafafa;
        margin-top: 20rpx;
    }
    .t-inp{
        margin-top: 20rpx;
        width: 100%;
        min-height: 80rpx;
        padding: 20rpx;
        background-color: #fafafa;
    }
    .inp{
        flex: 1;
        text-align: right;
    }
    .p-inp{
        color: #acacac;
    }
    .down{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 10rpx;
    }
    .add-icon{
        width: 152rpx;
        height: 56rpx;
    }
    
    
    .switch1 {
    	width: 140rpx;
    	height: 54rpx;
    	background: #9eafc2;
    	position: relative;
    	border-radius: 50rpx;
    
    	.switch-small {
    		width: 46rpx;
    		height: 46rpx;
    		position: absolute;
    		left: 4rpx;
    		top: 4rpx;
    		background: white;
    		border-radius: 50%;
    	}
    
    	.switch-text {
    		color: white;
    		position: absolute;
    		left: 20rpx;
    		font-weight: normal;
    		top: 0rpx;
    		font-size: 24rpx;
    		line-height: 54rpx;
    	}
    }
    
    .switchAct2 {
    	background: #9eafc2;
    
    	.switch-small {
    		left: 4rpx !important;
    		transition: 0.3s;
    	}
    
    	.switch-text {
    		left: 60rpx !important;
    	}
    }
    .switchAct1 {
    	background: #00a1e9;
    
    	.switch-small {
    		left: 91rpx !important;
    		transition: 0.3s;
    	}
    
    	.switch-text {
    		left: 30rpx !important;
    	}
    }
    
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #00a1e9;
        border-radius: 50rpx;
        margin-top: 50rpx;
    }
</style>
